<template>
	<div class="useropinion">
		<div class="useropinionTitle">绑定手机</div>
		<div class="mymessageText changephone1">
			<div class="changephone1-div1">
				<span>1.验证原手机号</span>
				<span>2.验证新手机号</span>
				<span>3.换绑成功</span>
			</div>
			<div><input type="text" :value="userphone" class="changephone1-ipt1"></div>
			<div><input type="text" placeholder="验证码" class="changephone1-ipt2"><div @click="refreshCode"><piccode :identifyCode="identifyCode" class="piccode"></piccode></div></div>
			<div><input type="text" placeholder="输入密码验证身份" class="changephone1-ipt3"></div>
			<div class="changephonesub" ><router-link to="/myself/mymessage/changephone2">提交验证</router-link></div>
		</div>
	</div>
</template>

<script>
	import piccode from '../components1/picCode.vue'
	export default {
		name: "codetest",
		components: {
			piccode
		},
		data() {
			return {
				identifyCodes: "1234567890",
				identifyCode: "",
				userphone:null
			};
		},
		created(){
			var userphone=localStorage.getItem("userphone");
			this.userphone=userphone;
		},
		mounted() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
		},
		methods: {
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						this.randomNum(0, this.identifyCodes.length)
					];
				}
			},
			// surepassword(){
			// 	// var _this=this;
			// 	var userphone=document.getElementsByClassName('changephone1-ipt1')[0].value;
			// 	var code=document.getElementsByClassName('changephone1-ipt2')[0].value;
			// 	var password=document.getElementsByClassName('changephone1-ipt3')[0].value;
			// 	if(code!=this.identifyCode){
			// 		alert('验证码错误')
			// 	}else if(code==this.identifyCode){
			// 		this.$axios.post("http://localhost:3000/userinfor/changephone1",{
			// 			userphone:userphone,password:password
			// 		}).then(function(response){
			// 			var list=response.data;
			// 			// if(list.code==200){
							
			// 			// }else{
			// 			// 	alert("密码错误")
			// 			// }
			// 			window.console.log(list);
			// 			window.console.log(response);
			// 		})
			// 	}
			// }
		}
	}
</script>

<style>
	.changephone1 div{
		height: 40px;
		margin-top: 40px;
		margin-left: 5%;
	}
	.changephone1-div1 span{
		float: left;
		height: 40px;
		line-height: 40px;
		width:25%;
		text-align: center;
	}
	.changephone1-div1 span:nth-of-type(1){
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
		color: white;
	}
	.changephone1-div1 span:nth-of-type(2){
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
	}
	.changephone1-div1 span:nth-of-type(3){
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
	}
	.changephone1 input{
		float: left;
		width: 30%;
		outline: none;
		border: 1px solid #c1c1c1;
	}
	.changephone1 .changephone1-ipt2{
		width: 15%;
	}
	.changephone1 .piccode{
		float: left;
		margin: 0px;
		margin-left: 10px;
		padding: 0px;
	}
	.changephone1 .changephonesub{
		width: 150px;
		height: 50px;
		line-height: 50px;
		background: #f08200;
		text-align: center;
		
		border-radius: 5px;
	}
	.changephonesub a{
		display: inline-block;
		width: 100%;
		height: 100%;
		color: white;
	}
</style>
